<template>
  <div class="search-bar">
    <span class="placeholder" @click="isSearch = true">搜索</span>
    <transition
      enter-active-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__fadeOut"
    >
      <div
        class="search-page"
        v-show="isSearch"
        @click="isSearch = false"
        @animationend="showEed"
      >
        <div class="search-wrap" @click.stop>
          <input type="text" ref="search" v-model="keyword" />
          <div class="search-tip-list" v-show="tips.length >= 1">
            <div class="tips-item" v-for="(item, index) in tips" :key="index">
              <h2>{{item.q}}</h2>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'search-bar',
  data () {
    return {
      isSearch: false,
      keyword: '',
      tips: []
    }
  },
  watch: {
    keyword () {
      this.fetchSearchSugrec()
    }
  },
  methods: {
    showEed () {
      this.$refs.search.focus()
    },
    async fetchSearchSugrec () {
      console.log(this.$api)
      const res = await this.$api.search.sugrec({
        keyword: this.keyword
      })
      this.tips = res.data || []
      console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
.search-bar {
  height: 28px;
  width: 30%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 28px;
  cursor: text;
  margin: 10px auto;
  max-width: 400px;
  .placeholder {
    text-align: center;
    line-height: 28px;
    display: block;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.6);
  }
  .search-page {
    position: fixed;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 1000;
    .search-wrap {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -60%);
      width: 50%;
      height: 50px;
      background: #fff;
      border-radius: 50px;
      input {
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: transparent;
        border: 0;
        border-radius: 50px;
        outline: none;
        padding: 20px 40px;
      }
    }
    .search-tip-list {
      background: rgba(255, 255, 255, 0.2);
      backdrop-filter: saturate(180%) blur(20px);
      width: 100%;
      max-height: 500px;
      margin-top: -25px;
      position: relative;
      z-index: -1;
      padding-top: 25px;
      .tips-item {
        line-height: 50px;
        font-size: 12px;
        padding: 0 20px;
      }
    }
  }
}
</style>
